

<include file="header"/>
<css file="__PUBLIC__/index/css/index.css"/>
<script>
    $(function(){
        var PUBLIC = "__PUBLIC__";
        var url = "__URL__";
        var app = "__APP__";
        var uid = "{$Think.session.uid}";
        water($('.box'));
        var num=1;
        var stop = true;
        $(window).scroll(function(){
            var lastBox = $('.box').eq($('.box').length-1);
            if(getLast($('.box')) && stop){
                stop=false;
                $.post(url+'/ajaxhua',{'num':num},function(data){
                    if(data.num==0){
                        stop=false;
                        return false;
                    }
                    //  data = eval(data);     
                    for(var i in data){
                        var box = "<div class='box'>";         
                        box +="<li>";
                        box +="<div class='huabname'>";
                        box +="<div class='huatop'>";
                        box +="<span class='kname'>"+data[i].name+"</span>";
                        box +=" </div>";
                        box +=" <a href='"+app+"/Complete/showhuab/kid/"+data[i].kid+"' class='smallimg'>";
                        var img = data[i].img;
                        for(var j in img){
                            box +="<img src='"+img[j].adres+"' width='60' height='60'>";
                        }
                        box +="</a>";
                        box +="<div class='attuser'>";
                        box +="<img src='"+data[i].thump+"' width='25' height='25'/>";
                        box +="&nbsp;&nbsp;<a href='"+app+"/Complete/showuser/uid/"+data[i].uid+"'>"+data[i].uname+"</a>";
                        box +="</div>";
                        box +="<div class='atten1'>";
                        if(uid==data[i].pid){
                            box +="<a href='"+app+"/?m=Complete&a=geit&kid="+data[i].kid+"'>编辑</a>"; 
                        }else{
                            if(data[i].atten==0){
                            box +=" <a href='javascript:;' class='attention' name='"+data[i].kid+"'>关注</a>";
                            }else{
                                box +=" <a href='javascript:;' class='relatten' name='"+data[i].kid+"'>已关注</a>"; 
                            }
                        }
                        box +="</div>";
                        box +="</div>";
                        box +="</li>";        
                        box +="</div>";
                        $('#water ul').append(box);
                    }
                    water($('.box'));
                    stop=true;
                    num++;
                },'json')
                         
            }
        })
            

        //获得滚动时最后一个div
        function getLast(obj){
            var windowH = document.body.clientHeight || document.documentElement.clientHeight;
            var scrollH = $(window).scrollTop();
            obj = obj.eq(obj.length-1);
            var objH = obj.outerHeight(true)/2+obj.offset().top;
            return objH<(windowH+scrollH)?true:false;
            
            
        }
        
        function water(obj){
            var boxTop = [];
            obj.each(function(index,box){
                if(index<5){
                    boxTop.push($(box).outerHeight(true));
                }
            })
            for(var i=5;i<obj.length;i++){
                var minHeight = Math.min.apply(false,boxTop);
                obj.eq(i).css('position','absolute');
                var minLeftindex =getMinHeight(boxTop,minHeight);
                obj.eq(i).css({top:minHeight,left:obj.eq(minLeftindex).position().left})
                boxTop[minLeftindex] = obj.eq(i).outerHeight()+ boxTop[minLeftindex];
            }     
            function getMinHeight(arr,min){
                var index = '';
                for( var i in arr){
                    if(arr[i] == min){
                        index = i;
                    }
                }
                return index;
            }
            
        }
        
        
        $('.onl').hover(function(){
            $('.onl_close').show();
        },function(){
            $('.onl_close').hide();
        })
        $('.onl_close').click(function(){
            $(this).parent().parent().parent().css({opacity:0});
        })
       
    })
</script>
<div class="middle">
    <div class="content">
        <div class="top">
            最新画板
            <ul class="con_link">
                <li class="cai">
                    <a href="{:U('Index/index')}" class="caiji">采集</a>
                </li>
                <li class="hua">
                    <a href="{:U('Index/huaban')}" class="huaban check">画板</a>
                </li>
                <li class="tui">
                    <a href="#" class="tuijian">推荐用户</a>
                </li>
            </ul>
        </div>
        <!--瀑布流图片布局-->
        <div id="water">
            <div class="box">
                <div class="border">
                    <div class="pin onl">
                        <a href="javascript:;" class="onl_close"></a>
                        <img src="__PUBLIC__/index/images/0.png" />
                    </div>
                </div>
            </div>
            <ul>
                <volist name="hua" id="s">
                    <div class="box">
                        <li>
                            <div class="huabname">
                                <div class="huatop">
                                    <span class="kname">{$s.name}</span>
                                </div>
                                <a href="{:U('Complete/showhuab/kid/'.$s['kid'])}" class="smallimg">
                                    <taglib name="blog"/>
                                    <blog:showimg kid="$s['kid']">
                                        <img src="{$field.adres}" width="60" height="60">
                                    </blog:showimg>
                                </a>
                                <div class="attuser">
                                    <img src="{$s.thump}" width="25" height="25"/>
                                    &nbsp;&nbsp;<a href="{:U('Complete/showuser/uid/'.$s['uid'])}">{$s.uname}</a>
                                </div>
                                <div class="atten1">
                                    <if condition="$s.pid eq $_SESSION['uid']">
                                        <a href="{:U('Complete/geit/kid/'.$s['kid'])}">编辑</a> 
                                        <elseif condition="$s.atten eq 0"/>
                                        <a href="javascript:;" class="attention" name="{$s.kid}">关注</a>
                                        <else/>
                                        <a href="javascript:;" class="relatten" name="{$s.kid}">已关注</a>
                                    </if>
                                </div>
                            </div>
                        </li>
                    </div>
                </volist>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
